<style lang="scss" scoped>
	.content {}



	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.lists {
		padding: 30rpx;

		.list {

			width: 690rpx;
			padding-bottom: 10rpx;
			opacity: 1;
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			margin-bottom: 30rpx;

			.head {
				width: 100%;

				.tips {
					width: 136rpx;
					border-bottom: 1px solid #eee;
					border-right: 1px solid #eee;

					.tip {
						height: 68rpx;
					}

					.actived {
						background: #fa5151;
						color: #fff;
					}
				}

				.ordernum {
					height: 136rpx;
					padding: 0 20rpx;
					flex: 1;
					border-bottom: 1px solid #eee;

					>view {
						height: 68rpx;
					}

					.between-flex {
						width: 100%;
					}
				}
			}

			.contains {
				width: 100%;
				padding: 20rpx;

				.text {
					width: 620rpx;
					line-height: 60rpx;
				}
			}


		}
	}

	.btns {
		height: 100rpx;
		justify-content: flex-end;

		padding: 20rpx;

		.btn {
			width: 150rpx;
			height: 68rpx;

			border-radius: 36rpx;
			margin-left: 50rpx;
		}

	}

	.largebtn {
		width: 690rpx;
		height: 88rpx;
		background: #ffffff;
		border: 2rpx solid #409eff;
		border-radius: 46rpx;

	}

	#nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 1000;
	}
</style>

<template>
	<view class="content">
		<view id="nav">
			<view class="top bgwhite">
				<view class="search align-flex " style="margin-bottom: 20rpx;">
					<u-icon name="search" color="#666" size="34"></u-icon>
					<input class="ipt p-left20" type="text" v-model="keywords" @input="reset()" placeholder="搜索单号/关键词" />
				</view>

				<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change"></u-tabs>
				<view v-if="current==1" class="center-flex" style="border-top: 1px solid #eee;height:148rpx;">
					<view v-if="!showRadio" class="largebtn center-flex blue bold f34" @click="showRadio=true;orderNum='';">
						批量通过
					</view>
					<view style="width: 100%;padding:0 20rpx;" v-else class="between-flex">
						<view class="blue f34 bold p-left20" @click="chooseAll">全选</view>
						<view class="btns f28 align-flex">
							<view @click="accpetAll" class="btn bgblue cfff center-flex">通过</view>
							<view @click="showRadio=false;orderNum='';" style="border:1px solid #409eff;" class="btn cfff center-flex blue">退出</view>

						</view>

					</view>
				</view>

			</view>
		</view>
		<view :style="'height:'+navheight+'px;'"></view>
		<view v-if="current==1" style="height:148rpx;"></view>
		<checkbox-group name="" @change="chooseOrder">
			<view class="lists ">
				<view class="list" v-for="item,index in list" :key="index">
					<view class="head flex">
						<view class="tips">
							<view class="tip f28 center-flex  actived" :style="'background:'+$degreeColor(item.degree)+';'">
								{{item.degree | degree}}
							</view>
							<view :style="{borderTop: '1px solid #eee;',
							color:$rangeTypeColor(item.rangeType)}" class="tip f28 center-flex ">{{item.rangeType | rangeType}}</view>
						</view>
						<view class="ordernum f28 c999">
							<view class="between-flex">
								<view class="f26">工单号: {{item.orderNum}}</view>
								<view v-if="!showRadio" class="f26" :style="'color:'+$statusColor(item.operState)+';'">
									{{item.operState | processState}}
								</view>
								<view v-else>
									<label class="radio">
										<checkbox color="#409eff" :checked="orderNum.indexOf(item.orderNum)!=-1" :value="item.orderNum" />
									</label>
								</view>
							</view>
							<view class="align-flex">建单时间: {{item.createTime}}</view>
						</view>
					</view>
					<view class="contains between-flex">
						<view class="text" @click="$navTo('/pages/aduitOrder/detail?orderNum='+item.orderNum)">
							<view>
								<span class="c999">报修科室:</span>
								<span>{{item.deptId | subject}}</span>
							</view>
							<view>
								<span class="c999">故障分类:</span>
								<span>{{item.faultType | faultType}}</span>
							</view>
							<view class="two">
								<span class="c999">故障描述:</span>
								<span>{{item.faultRemark |deleteHTMLTag }}</span>
							</view>
							<view v-if="item.detailInfo" class="two">
								<span class="c999 ">详细说明:</span>
								<span>{{item.detailInfo}}</span>
							</view>
							<view v-if="item.responseType">
								<span class="c999">响应类型:</span>
								<span>{{item.responseType | responseType}}</span>
								<span class="p-left10" v-if="item.appointment">{{item.appointment}}</span>
							</view>
							<view v-if="item.postUserName">
								<span class="c999">报修人:</span>
								<span>{{item.postUserName||'-'}}</span>
								<span class="blue p-left20;" v-if="item.postUserNum" style="text-decoration: underline;" @click.stop="$makephone(item.postUserNum)">{{item.postUserNum}}</span>
							</view>
							<view class="between-flex" v-if="item.makeUserName">
								<view><span class="c999">工程师:</span>
									<span>{{item.makeUserName}}</span>
								</view>
								<view v-if="item.completeTime">
									<span class="c999">完成时间:</span>
									<span>{{item.completeTime}}</span>
								</view>
							</view>
							<view class="flex m-top10" v-if="item.makeWay">
								<span class="c999">解决办法:</span>
								<view class="two" style="width:500rpx;">{{item.makeWay | base64ToText}}</view>
							</view>
							<view class="between-flex m-top10">
								<view v-if="item.reqTime"><span class="c999">预计耗时:</span><span>{{item.reqTime}}小时</span>
								</view>
								<view v-if="item.realTime"><span class="c999">实际耗时:</span><span :style="item.realTime>item.reqTime?'color:#F56C6C;':''">{{item.realTime}}小时</span>
								</view>
							</view>
						</view>
						<u-icon name="arrow-right" color="#98a5b3" size="28"></u-icon>
					</view>
					<view class="btns f28 align-flex" v-if="!showRadio&&item.currState=='wait_audit'">
						<view @click="rejectOrder(index)" style="background-color: #F56C6C;" class="btn cfff center-flex ">未通过</view>
						<view @click="accpetOrder(index)" class="btn bgblue cfff center-flex">通过</view>
					</view>
				</view>
			</view>
		</checkbox-group>

		<u-popup border-radius="24" mode="bottom" v-model="showPopup" :closeable="true">
			<notpass @submit="showPopup=false;reset()" :orderNum="orderNum"></notpass>
		</u-popup>
		<u-empty style="position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);" v-if="nomore" text="空空如也~~" mode="list"></u-empty>
	</view>



</template>

<script>
	import notpass from '@/components/order/notpass.vue'
	let Base64 = require('@/common/base64.js')
	export default {
		components: {
			notpass
		},

		filters: {
			base64ToText(val) {
				return Base64.decode(val)
			}
		},
		data() {
			return {
				head: this.$head,
				nav: [{
						name: '全部',
						auditState: ''
					}, {
						name: '待审核',
						auditState: '0',
						count: 0
					}, {
						name: '通过',
						auditState: '1',
						count: 0
					},
					{
						name: '未通过',
						auditState: '2',
						count: 0
					}
				],
				current: 0,
				page: 1,
				list: [],
				keywords: '',
				nomore: false,
				navheight: 0,
				showPopup: false,
				orderNum: '',
				showRadio: false

			}
		},
		onLoad() {
			setTimeout(() => {
				let info = uni.createSelectorQuery().select("#nav");
				info.boundingClientRect((data) => {

					this.navheight = data.height

					console.log(this.navheight)
				}).exec()
			}, 600)

		},
		onShow() {
			this.reset()

		},
		onReachBottom() {
			this.getlist()
		},
		methods: {
			getRedInfo() {
				this.$pop.ajaxPost('/busOrderFault/auditOrderByWechatRed').then(res => {
					this.nav[1].count = res.body.wait_audit
					this.nav[2].count = res.body.pass
					this.nav[3].count = res.body.reject

					this.$forceUpdate()
				})
			},
			rejectOrder(index) {
				this.orderNum = this.list[index].orderNum
				this.showPopup = true
			},
			accpetOrder(index) {
				this.orderNum = this.list[index].orderNum
				uni.showModal({
					title: '确认通过审核吗？',
					success: (res) => {
						if (res.confirm) {
							this.$pop.ajaxPost('/busOrderExamine/pass', {
								orderNum: this.orderNum
							}).then(res => {
								if (res.code == 0) {
									this.$msg('通过成功')
									this.reset()
								}
							})
						}
					}
				})
			},
			chooseOrder(e) {

				this.orderNum = e.detail.value.join(',')
			},
			chooseAll() {
				var list = this.orderNum.split(',')
				if (list.length == this.list.length) {
					this.orderNum = ''
				} else {
					var arr = []
					this.list.forEach(item => {
						arr.push(item.orderNum)
					})
					this.orderNum = arr.join(',')
				}

			},
			accpetAll() {
				if (!this.orderNum) {
					this.$msg('未选择工单')
					return
				}
				uni.showModal({
					title: '确认批量通过审核吗？',
					success: (res) => {
						if (res.confirm) {
							this.$pop.ajaxPost('/busOrderExamine/pass', {
								orderNum: this.orderNum
							}).then(res => {
								if (res.code == 0) {
									this.$msg('通过成功')
									this.reset()
								}
							})
						}
					}
				})
			},
			reset() {
				this.list = []
				this.page = 1
				this.showRadio = false
				this.getRedInfo()
				this.getlist()
			},
			change(index) {
				this.current = index;
				this.reset()
			},
			getlist() {

				this.$pop.ajaxPost('/busOrderFault/auditOrderByWechat', {
					query: this.keywords,
					pageNum: this.page,
					pageSize: 10,
					auditState: this.nav[this.current].auditState
				}).then(res => {
					if (res.code == 0) {

						var list = res.body.list
						console.log('list', list)
						if (this.page == 1) {

							this.list = list
						} else {
							this.list = this.list.concat(list)
						}

						this.page++
						this.list.length == 0 ? this.nomore = true : this.nomore = false
					}
				})
			}

		}
	}
</script>
